<template>
  <div class="global_loading" v-if="_visible">
    <Spin :tip="tip"></Spin>
  </div>
</template>

<script setup lang="ts">
import { Spin } from 'ant-design-vue';

const props = defineProps({
  tip: {
    type: String,
    default: 'Loading...',
  },
});
const _visible = defineModel('visible', {
  type: Boolean,
  default: false,
});
</script>

<style scoped lang="scss">
.global_loading {
  z-index: 9999999;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}
:deep(.ant-spin-text) {
  color: #fff;
  font-weight: 700;
}
:deep(.ant-spin-dot-item) {
  background: #fff;
}
</style>
